<template>
	<view id="container" class="container" :style="{ backgroundColor: backgroundColor }">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="top-system">
			<navigator class="top-navigator" animation-type="pop-out" animation-duration="300" open-type="navigateBack" ><uni-icons type="left" size="30"></uni-icons></navigator>
			<view class="top-title">
                <text v-if="title != ''">{{ title }}</text>
                <!--插槽slot-->
                <slot v-else></slot>
            </view>
			<view class="top-icon-container">
				<uni-icons v-if="iconList.length" class="top-icon" v-for="icon in iconList" :type="icon" size="30"></uni-icons>
                <text v-if="rightTitle != ''" class="top-right-title" @tap="closeSearch">{{ rightTitle }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const instance = getCurrentInstance();
const statusBarHeight = ref(0)
defineProps({
	title: {
		type: String,
		default: ''
	},
	iconList: {
		type: Array,
		default: () => []
	},
	backgroundColor: {
		type: String,
		default: '#fff'
	},
    rightTitle: {
        type: String,
        default: ''
    }
})

//关闭搜索
const closeSearch = () => {
	emit('closeSearch')
}

//向父组件传值
const emit = defineEmits()
onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight; //获取状态栏高度
	const query = uni.createSelectorQuery().in(instance.proxy)
	query.select('#container').boundingClientRect((rest) => {
		emit('topBarHeight', rest.height, statusBarHeight.value)
	}).exec();
})
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	padding-bottom: 15rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
	.status-bar{
		width: 100%;
	}
	.top-system{
        .top-navigator{
            width: 20%;
        }
        .top-title{
            flex: 1;
            text-align: center;
        }
		padding: 2rpx 10rpx 2rpx 10rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
        .top-icon-container{
            width: 20%;
            display: flex;
            .top-icon{
                margin-left: 15rpx;
            }
            .top-right-title{
                margin-left: auto;
                margin-right: 10rpx;
            }
        }
		
	}
	
}
</style>